<div id="message">
    <h1>Message</h1>
    <a href="<?php echo BASE_PATH; ?>/messages/add">New Message</a>
    <div id="message_list">
    </div>
    <div class="clear"></div>
    <a id="loadmore" href="#" style="display: none" onclick="load_more(); return false;"><div id="loadmore-message" class="loadmore">Load more</div></a>
    <script type="text/javascript">
        var page = 1;

        load_show();

        function load_show() {
            page = 1;

            biji.select("#message_list").innerHTML = '<img src="<?php echo BASE_PATH; ?>/img/loading.gif" alt="" />';

            biji.load("<?php echo BASE_PATH; ?>/messages/show_ajax/<?php echo $this->session->get("user_id"); ?>/" + page, function(data) {
                if (data != '') {
                    biji.select("#loadmore").style.display = 'inline';
                    biji.select("#message_list").innerHTML = data;
                } else {
                    biji.select("#message_list").innerHTML = 'No message';
                }
            });
        }

        function load_more() {
            ++page;

            biji.select("#loadmore-message").innerHTML = '<img src="<?php echo BASE_PATH; ?>/img/loading.gif" alt="" />';
        
            biji.load("<?php echo BASE_PATH; ?>/messages/show_ajax/<?php echo $this->session->get("user_id"); ?>/" + page, function(data) {
                if (data == '') {
                    biji.select("#loadmore").style.display = 'none';
                } else {
                    biji.select("#loadmore").style.display = 'inline';
                    biji.select("#message_list").innerHTML += data;
                }
            
                biji.select("#loadmore-message").innerHTML = 'Load more';
            });
        }
    </script>
</div>
